<template>
    <basic-container>
      <avue-crud :data="data"
       :option="option"
       :page="page"
        @refresh-change="refreshChange"
        @search-change="searchChange"
        @search-reset="searchReset"
        @current-change="currentChange"
        @size-change="sizeChange"
        @on-load="onLoad"
        >
        <!-- 是否显示插槽 -->
			<template slot-scope="{row}" slot="status">
				<el-switch
         @change="rowSwitchChange(row)"
          v-model="row.status"
          active-value="ENABLE"
           inactive-value="DISABLE"
           active-color="#13ce66"
           inactive-color="#ff4949">
				</el-switch>
			</template>
      <template slot="menuLeft">
        <el-button size='mini' type="primary" @click="add" v-has="'/mall-cloud-system/mgr/addUser'">+ 新增</el-button>
      </template>
      <!-- 编辑按钮 -->
      <template slot-scope="{row,type,size}" slot="menu">
				<el-button :type="type" :size="size"  @click="editNew(row)" v-has="'/mall-cloud-system/mgr/getUserById'">编辑</el-button>
       <!-- <el-button :type="type" :size="size" @click="delNew(row)" v-has="'/mall-cloud-system/mgr/delete'">删除</el-button>-->
			</template>
    </avue-crud>
        <!-- 编辑弹出框 -->
            <el-dialog title="编辑" :visible.sync="editBox"  width="50%">
                <div class="bigBox">
                      <el-form :model="formData" :rules="rules" ref="ruleFormEdit" label-width="80px">

                          <el-form-item label="账号" prop="account" >
                            <el-input v-model="formData.account" autocomplete="off" size='mini' ></el-input>
                          </el-form-item>
                          <el-form-item label="姓名" prop="name">
                            <el-input v-model="formData.name" autocomplete="off" size='mini' ></el-input>
                          </el-form-item>
                          <el-form-item label="手机号"  prop="phone">
                            <el-input v-model="formData.phone"  size='mini' ></el-input>
                          </el-form-item>

                    </el-form>
              </div>
            <div slot="footer" class="dialog-footer">
                <el-button type="primary" @click="editBtn('ruleFormEdit')" size='mini'  :loading="editLoad"  v-has="'/mall-cloud-system/mgr/edit'"> 确 定</el-button>
            </div>
        </el-dialog>
        <!-- 添加弹出框 -->
        <el-dialog title="新增" :visible.sync="box"  width="50%" >
          <div class="bigBox">
              <el-form :model="formData" :rules="rules" ref="ruleFormAdd" label-width="80px">

              <el-form-item label="账号" prop="account" >
                  <el-input v-model="formData.account" autocomplete="off" size='mini' ></el-input>
              </el-form-item>

              <el-form-item label="姓名" prop="name">
                  <el-input v-model="formData.name" autocomplete="off" size='mini' ></el-input>
              </el-form-item>
              <el-form-item label="手机号"  prop="phone">
                  <el-input v-model="formData.phone"  size='mini' ></el-input>
              </el-form-item>
              <el-form-item label="密码"  prop="password">
                <el-input v-model="formData.password" size='mini' type="password"></el-input>
              </el-form-item>


            </el-form>
              </div>
            <div slot="footer" class="dialog-footer">
            <el-button type="primary" @click="addBtn('ruleFormAdd')" size='mini' :loading="addLoad" v-has="'/mall-cloud-system/mgr/addUser'">确 定</el-button>
          </div>
        </el-dialog>   
      </basic-container>
</template>
<script>
import {
    getList,
    update,
    add,
    remove,
    updateStatus
    //pauseJob,
    //resumeJob
} from "@/api/minmao/mgr/directStore.js";
import {
    checkTel

}
    from '@/util/rej';
import {
    isCorrectName,
    testPassWord,
    checkBuyerNo
} from '@/util/util'
export default {
      data() {
      return {
          editLoad:false,
          addLoad:false,
      // 旧的任务分组
      oldJobName:'',
      oldJobGroup:'',
      query: {},
      page: {
        pageSize: 10,
        currentPage: 1,
        total: 0
      },
        box:false,
        editBox:false,
        formData:{
          jobGroup:'',
          jobName:'',
          cronExpression:'',
          jobDescription:''
        },
        rules: {
            account:[
            { required: true, message: '请输入账号', trigger: 'blur' },
                {validator: checkBuyerNo,trigger: 'blur'} ,
          ],
          name:[
            { required: true, message: '请输入姓名', trigger: 'blur',},
              {validator: isCorrectName,trigger: 'blur'} ,

          ],
          phone:[
             { required: true, message: '请输入手机号码', trigger: 'blur' },
              {validator: checkTel,trigger: 'blur'} ,
          ],
          password:[
             { required: true, message: '请输入密码', trigger: 'blur',testPassWord},
              {validator: testPassWord,trigger: 'blur'} ,
          ]
        },
        data:[],
        option:{
          size: 'mini',
          editBtn:false,
          addBtn:false,
          delBtn:false,
          height: 'auto',
           // calcHeight: 380,
          index: true,
          page:false,
          align:'center',
          menuAlign:'center',
		  menuWidth: 100,
		  searchMenuSpan:6,
          column:[
            {
              label:'账号',
              prop:'account',
              search: true,
               rules: [{
                   required: true,
                   message: "请输入账号",
                   trigger: "blur"
            }]
            },
            {
              label:'姓名',
              prop:'name',
              rules: [{
                   required: true,
                   message: "请输入姓名",
                   trigger: "blur"
            }]
            },
              {
                  label:'电话',
                  prop:'phone',
                  rules: [{
                      required: true,
                      message: "请输入电话",
                      trigger: "blur"
                  }]
              },
             {
              label:'类型',
              prop:'roleName',
              rules: [{
                   required: true,
                   message: "请输入类型",
                   trigger: "blur"
            }]

            }
             ,
              {
              label: '状态',
			  prop: 'status',
			  type: 'switch',
              search: true,
              dicData:  [
                  {
                      label: "正常",
                      value: 'ENABLE'
                  },
                  {
                      label: "禁用",
                      value: 'DISABLE'
                  }
              ],
			  slot: true,
              cell: true,
            }
          ]
        },
      };
    },
    watch:{
        box(val){
            if(!val){
                this.$nextTick(()=>{
                    this.$refs["ruleFormAdd"].resetFields();
                })
                this.addLoad=false
            }
        },
        editBox(val){
            if(!val){
                this.$nextTick(()=>{
                    this.$refs["ruleFormEdit"].resetFields();
                })
                this.editLoad=false
            }

        },
    },
    methods: {
      // 点击页数
      currentChange (currentPage) {
      this.page.currentPage = currentPage;
    },
    // 点击页数
     sizeChange (pageSize) {
      this.page.pageSize = pageSize;
    },
    // 添加
    add(){
      this.box=true
        for (let key in this.formData) {
            delete this.formData[key];
        }
    },
  addBtn(formName){
        this.$refs[formName].validate((valid) => {
          if (valid) {
              this.addLoad=true
              this.formData.roleId = "7";
            add(this.formData).then((res)=>{
                if(res.data.code==200){
                    this.addLoad=false
                    this.box=false
                    this.onLoad(this.page);
                    this.$message({
                        type:'success',
                        message:'操作成功！'
                    })
                }else if (res.data.code==500){
                    this.addLoad=false
                    this.box=false
                    this.$message({
                        type:'error',
                        message:res.data.message
                    })

                }
            })
          } else {
            console.log('error submit!!');
            return false;
          }
        });
  },
  editBtn(formName){
    this.$refs[formName].validate((valid) => {
          if (valid) {
              this.editLoad=true
        update(this.formData).then((res)=>{
            if(res.data.code==200){
                this.editLoad=false
                this.$message({
                    type:"success",
                    message:"编辑成功！"
                })
                this.editBox=false
                this.onLoad(this.page);
            }else if(res.data.code==500){
                this.editLoad=false
                this.editBox=false
                this.$message({
                    type:'error',
                    message:res.data.message
                })
            }
        })
          } else {
            console.log('error submit!!');
            return false;
          }
        });
  },
      // 编辑弹框
      editNew(row){
        this.editBox=true
        this.formData=row
        this.formData.userId = row.id;
      },
  
      // 删除
   delNew(row){
      this.$confirm("确定将选择数据删除?", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(() => {
          return remove(row);
        })
        .then(() => {
          this.onLoad(this.page);
          this.$message({
            type: "success",
            message: "操作成功!"
          });
          
        });
    },
     // 改变显示与隐藏
    rowSwitchChange(row) {
        updateStatus(row.id,row.status).then(()=>{
           this.onLoad(this.page);
           this.$message({
            type: "success",
            message: "操作成功!"
          });  
        })

			},
    onLoad (page, params = {},done) {//页面初始化请求管理员列表
        getList(page.currentPage,page.pageSize,Object.assign(params, this.query)).then(res=>{
            if(done){
                done();
            }
            this.data=res.data.data
            this.page.total=res.data.count
        })
    },
     searchReset () {
      this.query = {};
      this.onLoad(this.page);
    },
   // 搜索框
   searchChange(params,done) {
     this.page.currentPage=1
      this.query = params;
      this.onLoad(this.page, params,done);
      },
     refreshChange({page,searchForm}){
        this.onLoad(this.page);
     }
    }
    
}
</script>
<style scoped>
.bigBox{
  width: 60%;
}
</style>


